<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #box{
            position: relative;
            width: 100px;
            height: 50px;
            background-color: #ff3040;
         }

        #box1{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:blue;
        }
        #box2{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:hotpink;
        }
        #box3{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:indigo;
        }
        #box4{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:palegreen;
        }
        #box5{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:orange;
        }
        #box6{
            position: relative;
            width: 100px;
            height: 50px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="点我移动">
<input type="button" id="btn1" value="点我回来">
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<script>
    var btn=document.getElementById("btn");
    var btn1=document.getElementById("btn1");
    var box=document.getElementById("box");
    var box1=document.getElementById("box1")
    var box2=document.getElementById("box2")
    var box3=document.getElementById("box3")
    var box4=document.getElementById("box4")
    var box5=document.getElementById("box5")
    var box6=document.getElementById("box6")
   /* btn.onclick=function(){
        var timerId=setInterval(function () {
            //步进  每次移动的距离
            var step=7;
            //目标位置
            var target=400;
            //盒子当前的位置
            var current=box.offsetLeft;
            if(current>=target){
                //让定时器停止
                clearInterval(timerId);
                //让盒子调到target的位置
                box.style.left=target+"px";
                return;
            }
            //距离=当前距离+步长
            box.style.left=current+step+"px";
            box.style.background="blue";
        },15);
    }*/
        btn.onclick= function () {
            animate(box,400);
            animate(box1,600)
            animate(box2,800)
            animate(box3,1000)
            animate(box4,800)
            animate(box5,600)
            animate(box6,400)
        }
    btn1.onclick= function () {
        animate(box,600);
        animate(box1,400)
        animate(box2,200)
        animate(box3,0)
        animate(box4,200)
        animate(box5,400)
        animate(box6,600)
    }


  //  var timerId=null;
   // function animate(element,target){
   //     //先清除定时器
   //     clearInterval(element.timerId);
   //     element.timerId=setInterval(function () {
   //         var current=element.offsetLeft;//获取当前位置
   //         var step=10;//步长
   //         if(current<target){//如果当前位置小于目标位置  就继续走
   //             //盒子的距离=盒子当前的距离+步长
   //             element.style.left=current+step+"px";
   //         }else {
   //             element.style.left=target+"px";//手动放到目标位置
   //             clearInterval(element.timerId);//停止定时器
   //         }
   //     },15)
   // }
    //左右升级版
   function animate(element,target){
        //先清除定时器
        clearInterval(element.timerId);
        element.timerId=setInterval(function () {
            var current=element.offsetLeft;//获取当前位置
            var step=10;//步长
            step=current<target?step:-step
            if(Math.abs(current-target)>=Math.abs(step)){//如果当前位置小于目标位置  就继续走
                //盒子的距离=盒子当前的距离+步长
                element.style.left=current+step+"px";
            }else {
                element.style.left=target+"px";//手动放到目标位置
                clearInterval(element.timerId);//停止定时器
            }
        },15)
    }
</script>
</body>
</html>